<template>
	<view class="bookshelf">
		<view class="bg">
			<view class="top">
				<view style="font-size: 40rpx; font-weight: 700; margin-left: 50rpx;">
					小说
				</view>
				<view class="ipt">
					<uni-search-bar radius='20' cancelButton=none bgColor="#F2F2F2" placeholder="请输入关键词"
						v-model="search">
					</uni-search-bar>
				</view>

				<view class="search" @click="goSearch()">
					搜索
				</view>
			</view>
			<view class="banner">
				<view class="u-demo-block">
					<u-swiper :list="bannerList" previousMargin="30" nextMargin="30" circular :autoplay="true"
						radius="5" bgColor="#ffe5b4" indicator indicatorMode="dot"></u-swiper>
				</view>
			</view>
			<view class="classList">
				<view class="list" v-for="(item,index) in classList" :key="index" @click="goPages(index)">
					<view class="img-box">
						<image :src="item.icon" mode="widthFix"></image>
					</view>
					<view class="name">
						{{item.name}}
					</view>
				</view>

			</view>
			<view class="bigBox">
				<view class="day-look">
					<view class="day-look-top">
						<view class="day-look-top-title">
							<view class="day-look-top-icon">
								<view class="img-box">
									<image src="../../static/day-look.png" mode="widthFix"></image>
								</view>
							</view>
							<view style="font-size: 37rpx;">
								今日必看
							</view>
						</view>
						<view class="icon" @click="refreshBook()">
							<image src="../../static/random.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="book-list">
						<view class="books" v-for="(item,index) in bookList" :key="index"
							@click="goDetail(item.sourceUrl)">
							<view class="books-img">
								<image :src="item.cover" mode="widthFix"></image>
							</view>
							<view class="content">
								<view class="title">
									{{item.title}}
								</view>
								<view class="author">
									<view>
										{{item.author}}
									</view>
									<view class="label">
										{{item.category}}
									</view>
								</view>
								<view class="text">
									<rich-text :nodes="item.description"></rich-text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		methods
	} from '../../uni_modules/uview-ui/libs/mixin/mixin'
	export default {
		name: 'bookshelf',
		data() {
			return {
				classList: [{
					name: '出版',
					icon: '/static/publish.png'
				}, {
					name: '分类',
					icon: '/static/classify.png'
				}, {
					name: '免费',
					icon: '/static/free.png'
				}, {
					name: '排行',
					icon: '/static/ranking.png'
				}],
				bannerList: [
					'https://img.zcool.cn/community/01df125d380055a8012187f4980c9b.png@1280w_1l_2o_100sh.png',
					'https://img.zcool.cn/community/01e6885d380636a8012187f4b7f151.jpg@1280w_1l_2o_100sh.jpg',
					'https://img.zcool.cn/community/019c8e5d380055a8012187f4d3ad12.jpg@2o.jpg',
					'https://img.zcool.cn/community/01812d5d380055a80120695c28a1d0.png@1280w_1l_2o_100sh.png'
				],
				bookList: [],
				num: 2001,
				search: '',
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			})
			this.getBook();
		},
		methods: {
			getBook() {
				uni.request({
					url: `https://apis.netstart.cn/yunyuedu/column/data.json?id=${this.num}`,
					method: 'GET,'
				}).then(res => {
					// console.log('res ==> ',res);
					this.bookList = res.data.data.books
					console.log('this.bookList ==> ', this.bookList);
					uni.hideLoading()
				}).catch(err => {
					console.log('err ==> ', err);
				})
			},
			refreshBook() {
				this.num++;
				if (this.num > 2002) {
					this.num = 2001
				}
				uni.showLoading({
					title: '加载中',
				});
				this.getBook()
			},
			goPages(index) {
				if (index == 0) {
					uni.navigateTo({
						url: '/pages/publication/publication'
					})
				} else if (index == 1) {
					uni.navigateTo({
						url: "/pages/classify/classify",
					})
				} else if (index == 2) {
					// uni.navigateTo({
					// 	url: "/pages/free/free",
					// })
				} else {
					uni.switchTab({
						url: "/pages/list/list",
					})
				}
			},
			goDetail(id) {
				id = id.replace('/source/', '');
				let user = uni.getStorageSync('userInfo');
				if (!user) {
					uni.showToast({
						title: '未登录,请先去登录',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '../detail/detail?id=' + id
					})
				}
			},
			goSearch() {
				if (this.search.length == 0) {
					uni.showToast({
						title: '搜索栏不能为空',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '../search/search?search=' + this.search
					})
				}

			},
		}
	}
</script>

<style lang="scss">
	.bg {
		width: 100%;
		// height: 1234rpx;
		height: 100vh;
		background-image: url('../../static/background-image.png');
		background-repeat: no-repeat;
	}

	.top {
		height: 180rpx;
		display: flex;
		align-items: center;

		.ipt {
			width: 435rpx;
			margin-left: 50rpx;
		}

		.search {
			font-size: 28rpx;
			margin-left: 30rpx;
		}
	}

	.banner {
		height: 260rpx;
		// background-color: red;
	}

	.classList {
		width: 675rpx;
		height: 124rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		background-color: #FCECCC;
		border-radius: 30rpx;
		display: flex;
		justify-content: space-around;
		margin-bottom: 20rpx;

		.list {
			width: 100rpx;
			height: 124rpx;

			.img-box {
				width: 60rpx;
				height: 60rpx;
				margin: 10rpx auto;

				image {
					width: 100%;
					display: block;
				}
			}

			.name {
				font-size: 25rpx;
				text-align: center;
			}
		}

	}

	.bigBox {
		background-color: #FFE5B4;

		.day-look {
			width: 675rpx;
			height: 1578rpx;
			margin: 0 auto;
			background-color: #fceccc;
			border-radius: 30rpx;

			.day-look-top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 30rpx;

				.icon {
					width: 52rpx;
					height: 50rpx;
					margin-right: 50rpx;

					image {
						width: 100%;
						display: block;
					}
				}

				.day-look-top-title {
					// padding-top: 30rpx;
					// margin-top: 30rpx;
					margin-left: 30rpx;
					display: flex;
					align-items: center;

					.img-box {
						width: 34rpx;
						height: 34rpx;
						margin-right: 20rpx;

						image {
							width: 100%;
							display: block;
						}
					}
				}
			}

			.book-list {
				.books {
					width: 607.5rpx;
					height: 230rpx;
					display: flex;
					// background-color: red;
					margin: 40rpx auto;

					.books-img {
						width: 180rpx;
						height: 240rpx;
						// background-color: red;
						border-radius: 20rpx;

						// margin-right: 40rpx;
						image {
							width: 100%;
							height: 100%;
							border-radius: 20rpx;

						}
					}

					.content {
						margin-left: 40rpx;
					}

					.title {
						font-size: 36rpx;
						font-weight: 700;
						margin-top: 8rpx;
					}

					.author {
						display: flex;
						align-items: center;
						color: #999999;
						font-size: 28rpx;
						margin-top: 18rpx;

						.label {
							margin-left: 20rpx;
							padding: 0 10rpx;
							height: 36rpx;
							border: 1px solid #FC768A;
							border-radius: 10rpx;
							font-size: 24rpx;
							color: #999999;
							text-align: center;
							line-height: 36rpx;
							background-color: #FCE2B2;
						}
					}

					.text {
						margin-top: 18rpx;
						width: 363.5rpx;
						height: 84rpx;
						font-size: 30rpx;
						color: #77828A;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}
	}
</style>